<template lang="html">
  <div class="main-page account" id="store-page">
    <!-- 标题 -->
    <!-- <van-nav-bar class="main-header" title="收益明细" :left-arrow="true" :fixed="true" :z-index="11" @click-left="onClickLeft"/> -->
    <nav-bar :title="'返利明细'"  @goBack="onClickLeft"/>
    <!-- 主体内容 -->
    <div class="main-content has-header-space">
      <!-- <notice-bar @click="openMsg" title="如果您对您的余额有任何疑问，请联系客服 >>"></notice-bar> -->
      <div class="account_details">
        <van-tabs v-model="active" sticky :offset-top="offset_top" title-active-color="#F57267" :lineWidth="63">
          <van-tab title="邀请返利">
            <div class="search_box">
              <div class="search_input">
                <span class="search_icon"></span>
                <input type="text" name="" v-model="keyword" value="" @input="searchSale" placeholder="搜索用户名">
                <span class="search_btn" @click="searchBtn">{{is_clear ? '清除' : '搜索'}}</span>
              </div>
            </div>
            <div v-if="loading || train_gains.length">
              <van-list v-model="loading" error-text="请求失败，点击重新加载" finished-text="没有更多了" @load="onLoad('train_gains')" loading-text="正在加载中" :finished="train_gains_page.finished">
                <Item item_type="1" v-for="item in train_gains" :item="item"  v-bind:key="item.id"></Item>
              </van-list>
            </div>
            <NotData v-if="!loading && !train_gains.length"></NotData>
          </van-tab>
          <van-tab title="销售返利">
            <div class="select_time" @click="showTime">
              <div class="select_txt"> {{time_long}} <span :class="show_time ? 'down_icon show' : 'down_icon'"></span> </div>
            </div>
            <div class="bank"></div>
            <div class="data_list" v-if="loading || commission_gains.length">
              <van-list v-model="loading" error-text="请求失败，点击重新加载" finished-text="没有更多了" @load="onLoad('commission_gains')" loading-text="正在加载中" :finished="commission_gains_page.finished">
                <Item item_type="2" v-for="item in commission_gains" :item="item" v-bind:key="item.id"></Item>
              </van-list>
            </div>
            <NotData v-if="!loading && !commission_gains.length"></NotData>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="tips_fiex" @click="openTips"></div>
    <van-dialog v-model="is_show_tips" use-slot bind:close="closeTips" class="account_dialog " confirmButtonText="我知道啦">
     <div class="account_tips">
       <h3 class="account_tips_title">收益明细说明</h3>
       <div class="tips_content">
           <div class="b">邀请奖励</div>
           <p>美家美货平台为鼓励会员分享购物，并给予会员一定的邀请奖励回馈，如：总监会员或超级会员邀请自己的超级会员或初级会员购买会员礼包后，该总监会员或超级会员享有平台给予的邀请奖励，多邀请多奖励哟！ </p>
           <div class="b">商品返利</div>
           <p>超级会员购买美家美货平台商品，在参与平台多种优惠活动的同时，可享受商品返利；并且超级会员邀请自己的初级会员购买平台商品后，还可享受此商品商品返利，优惠多多哟！ </p>
           <!-- <p>详情可咨询平台客服XXXXXXXXX。 </p> -->
       </div>
     </div>
   </van-dialog>
   <van-popup v-model="show_time" position="bottom" :overlay="true">
     <van-datetime-picker
       v-model="currentDate"
       type="year-month"
       :min-date="minDate"
       :max-date="maxDate"
       :formatter="formatter"
       @confirm="selectTime"
      />
   </van-popup>
  </div>
</template>

<script>
// import NoticeBar from '@/components/global/notice-bar.vue'
import NotData from '@/components/global/not-data.vue'
import Item from '@/components/merber/account_details/item.vue'
import NavBar from '@/components/global/nav-bar.vue'

// import Timelong from '@/components/global/time-long.vue'
import Tool from '@/utils/tool.js'
export default {
  components: { Item, NavBar, NotData },
  data () {
    return {
      active: 0,
      is_show_tips: false,
      train_gains: [],
      train_gains_page: {
        total: 0,
        curr_page: 0,
        finished: false
      },
      commission_gains_page: {
        total: 0,
        curr_page: 0,
        finished: false
      },
      commission_gains: [],
      loading: true,
      offset_top: 0,
      keyword: '',
      time_long: Tool.formatDate(),
      show_time: false,
      minDate: new Date(2018, 12, 31),
      currentDate: new Date(),
      maxDate: new Date(),
      is_clear: false
    }
  },
  created () {
    this.getDataList('train_gains')
    this.getDataList('commission_gains')
  },
  beforeUpdate () {
    let dom = document.getElementsByClassName('main-header')
    if (dom && dom[0]) {
      let dh = dom[0].clientHeight || dom[0].offsetHeight
      this.offset_top = dh
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    openMsg: function () {
      console.log('打开客服')
    },
    showTime: function () {
      this.show_time = !this.show_time
    },
    openTips () {
      this.is_show_tips = true
    },
    selectTime (e) {
      this.time_long = Tool.formatDate(e)
      this.commission_gains_page.curr_page = 0
      this.commission_gains = []
      this.commission_gains_page.total = 0
      this.showTime()
      this.getDataList('commission_gains')
    },
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      }
      return value
    },
    searchSale (e) {
      this.keyword = e.target.value
      console.log(e.target.value)
      if (!e.target.value) {
        this.is_clear = false
        this.getDataList('train_gains')
      } else {
        this.is_clear = false
      }
    },
    searchBtn () {
      if (this.is_clear) {
        this.keyword = ''
        this.getDataList('train_gains')
      } else {
        if (this.keyword) {
          this.train_gains_page.curr_page = 0
          this.train_gains = []
          this.train_gains_page.total = 0
          this.getDataList('train_gains')
          this.is_clear = true
        }
      }
    },
    onLoad (type) {
      this[type + '_page'].curr_page = this[type + '_page'].curr_page + 1
      this.getDataList(type)
    },

    getDataList (type) {
      let page = this[type + '_page'].curr_page
      let keyword = this.keyword
      let data = {
        type: type, page: page, user_nickname: keyword
      }
      if (type === 'commission_gains') {
        data = {
          type: type, page: page, time: this.time_long
        }
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'user_gains', params: data, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this[type] = this[type].concat(resp.data[type])
            this[type + '_page'].total = resp.data.total
            if (resp.data[type].length < 10) {
              this[type + '_page'].finished = true
            } else {
              this[type + '_page'].finished = false
            }
          }
          this.loading = false
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    }
  }
}
</script>

<style lang="css" scoped>
</style>
